<template>
  <div class="article">
    <div class="header">
      <van-icon name="arrow-left" @click="goBack" class="img" />
      <p class="strong" v-if="name">{{ name }}</p>
      <p>&nbsp;</p>
    </div>
    <div class="__profile">
      <div class="__profileLeft">
        <div class="__left">
          <img :src="picture" alt="" v-if="picture" />
        </div>
        <div class="__right">
          <p>{{ name }}</p>
          <p style="font-size: 12px">{{ fans !== -1 ? `${fans}万粉丝` : '224.7万粉丝' }}</p>
        </div>
      </div>
      <div class="__profileRigth" @click="followMe">
        <p v-show="follow">+&nbsp;关注</p>
        <p v-show="!follow">已关注</p>
      </div>
    </div>
    <div v-html="`${content}` ||
      `<h3><strong><( _ _ )>抱歉，没有获取到数据展示</strong></h3>`
      " class="__content"></div>
  </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount } from "vue";
import { useRoute, useRouter } from "vue-router";
import { get } from "@/tool/get";
import { Toast } from "vant";
export default {
  setup() {
    const route = useRoute();
    const router = useRouter();
    const getArticles = (id) => {
      return new Promise((res) => {
        get("/data/concernDetail", { params: id }).then((res) => {
          res = res.data
          state.picture = res.data.picture;
          state.content = res.data.content;
          state.name = res.data.name;
          state.title = res.data.title;
          state.fans = res.data.fans;
        });
        res(true)
      })
    };
    onBeforeMount(() => {
      getArticles(route.params.id).then((res) => {
        if (res === true) {
          Toast.clear();
        } else {
          Toast.fail("数据获取失败");
        }
      })

    });
    const goBack = () => {
      router.back(-1);
    };
    const followMe = () => {
      state.follow = !state.follow;
    };
    const state = reactive({
      picture: null,
      name: null,
      follow: true,
      fans:-1,
      content: undefined,
      title: "",
    });
    return {
      ...toRefs(state),
      goBack,
      followMe,
    };
  },
};
</script>

<style lang="less">
.article {
  p {
    margin: 0;
  }

  .header {
    padding: 5px 10px;
    box-sizing: border-box;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    line-height: 30px;
    background: linear-gradient(10deg, #eee, #fff, #eee);

    .img {
      width: 15px;
      height: auto;
    }

    p {
      font-size: 12px;
      color: black;
    }

    .strong {
      font-size: 18px;
      font-weight: 900;
      color: #000;
    }
  }

  .__profile {
    padding: 10px 10px;
    box-sizing: border-box;
    margin: 40px auto 10px auto;
    display: flex;
    flex: 1;
    width: 100%;
    text-align: center;

    .__profileLeft {
      text-align: center;
      flex: 1;
      display: flex;
      width: 100%;

      .__left {
        flex: 0 0 36px;
        height: 36px;
        margin-right: 10px;
        border-radius: 50%;

        img {
          width: 100%;
          border-radius: 50%;
        }
      }

      .__right {
        text-align: left;
        line-height: 18px;
        flex: 1;
      }
    }

    .__profileRigth {
      line-height: 36px;
      flex: 0 0 80px;

      p {
        text-align: center;
        font-size: 16px;
        display: inline-block;
        line-height: 26px;
        padding: 0 10px;
        box-sizing: border-box;
        background: #09a4f4;
        border-radius: 5px;
      }
    }
  }

  .__content {
    overflow-x: hidden;
    width: 100vw;
    padding: 5px 10px;
    box-sizing: border-box;

    p {
      font-weight: 200;
      text-align: left;
      font-size: 14px;
      width: 100%;
    }

    img {
      width: 100%;
      height: auto;
    }
  }
}
</style>